<template>
  <div class="container">
    <div>
      已完成{{ isComplete }} / 全部 {{ list.length }}
    </div>
    <div v-if="isComplete > 0" class="btn">
      <button @click="clear">清除已完成</button>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {useStore} from 'vuex'

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['clear'])

const store = useStore();

let isComplete = computed(() => {
  // 过滤已完成的任务
  let arr = props.list.filter(item => {
    return item.complete
  })
  store.commit('saveHistory', 'taskList')
  return arr.length

})
// 清除已完成
const clear = () => {
  console.log('clear')
  // 过滤未完成的
  let arr = props.list.filter(item => {
    return !item.complete
  })
  emit('clear', arr)
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;

  .btn {
    margin-left: 10px;
  }
}
</style>